
<template>
  <div >
    <form @submit="onSubmit" class="">
				<FormItem label="邮箱服务器" id="host">
					<InputText v-model="host" type="text" placeholder="请输入邮箱服务器" :class="{ 'p-invalid': hostError }"  />
        	<small class="p-error">{{ hostError || '&nbsp;' }}</small>
				</FormItem>
				<FormItem label="端口" id="port">
					<InputText v-model="port" type="text" placeholder="请输入端口" :class="{ 'p-invalid': portError }"  />
        	<small class="p-error">{{ portError || '&nbsp;' }}</small>
				</FormItem>
				<FormItem label="发件人邮箱" id="user">
					<InputText v-model="user" type="text" placeholder="请输入发件人邮箱" :class="{ 'p-invalid': userError }"  />
        	<small class="p-error">{{ userError || '&nbsp;' }}</small>
				</FormItem>
				<FormItem label="发件人密码" id="pass">
					<InputText v-model="pass" type="text" placeholder="请输入发件人密码" :class="{ 'p-invalid': passError }"  />
					<small>发件人邮箱授权码</small>
        	<small class="p-error">{{ passError || '&nbsp;' }}</small>
				</FormItem>
				<FormItem label="收件人邮箱" id="to">
				<InputText v-model="to" type="text" placeholder="请输入收件人邮箱" :class="{ 'p-invalid': toError }"  />
					<small>收件人邮箱地址，多个用,分割</small>
        	<small class="p-error">{{ toError || '&nbsp;' }}</small>
				</FormItem>
        <Button type="submit" label="Submit" />
    </form>
    <Toast />
  </div>
</template>

<script setup>
import { Button, InputText, InputNumber, Toast, useToast } from '@/utils/primevue.ts'
import FormItem from '@/components/FormItem';
import { useField, useForm } from 'vee-validate';
import * as Yup from 'yup';
import { onMounted, onBeforeMount } from 'vue';
import useConfigStore from '@/stores/config';

const configStore = useConfigStore()
const toast = useToast();


// 定义验证规则
const validationSchema = Yup.object({
	host: Yup.string().required('请输入有效的邮箱地址').min(3, '名称至少3个字符'),
	port: Yup.string().required('请输入有效的端口'),
});
const { handleSubmit, setValues } = useForm({ validationSchema, initialValues: configStore.mailInfo });
const { errorMessage: hostError, value: host } = useField('host', );
const { errorMessage: portError, value: port } = useField('port');
const { errorMessage: userError, value: user } = useField('user');
const { errorMessage: passError, value: pass } = useField('pass');
const { errorMessage: toError, value: to } = useField('to');


const onSubmit = handleSubmit((values) => {
	configStore.updateMailInfo(values, () => {
		toast.add({ severity: 'success', summary: '表单提交成功', life: 3000 });
	})
});
</script>
